//订阅
<template>
  <div>
    <!--   头-->
    <top @func="getSearch"></top>
    <!-- 顶部分页 -->
    <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                   :page-size="size"
                   :current-page="currentPage"
                   @current-change="pageChange"
    ></el-pagination>

    <div v-for="pages in searchInfo" :key="pages.channelId">
    <el-row>

        <el-col :span="2"><i class="el-icon-video-play"></i></el-col>

        <el-col :span="2">
          <router-link :to="{name:'channelDetail',query:{channelId:pages.channelId,counts:pages.counts,channelName:pages.channelName }}">
          {{pages.channelName}}
        </router-link> </el-col>
        <el-col :span="2">今日发布了 {{pages.counts}} 个帖子 </el-col>
      <el-col :span="2" :offset="20">
        <el-button type="danger" class="el-icon-reading" @click="cancel(pages.channelId,'del')" v-if="cancelFlag">退订</el-button>
      </el-col>

    </el-row>
      <el-row>


        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in pages.articalResList" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" class="card">
            <!-- 跳转到文章详情 并带上文章id -->
            <a :href="detailUrl(item.id)">
            <img
              :src="getImgsURL(item)"
              class="image"
              @click="jumpPageDetail(item.id)"
            >
            </a>
            <div style="padding: 14px;">
              <span>{{item.title}}</span>

              <div class="bottom clearfix">
                <el-row>
<!--                  <span>100k </span>-->
<!--                  <i class="el-icon-view"></i>-->
                  <!--图片数-->
<!--                  <span>{{item.imgs.length==0 ? 0 : item.imgs.split('&&').length}}P</span>-->
                  <!--                <span>{{item.imgs}}P</span>-->
                  <time class="time">{{dateUtil.stringParseDate(item.crDate,dateUtil.NOSS)}}</time>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>

      </el-row>
    <el-row>
        <el-col :span="2" :offset="20"><i class="el-icon-circle-plus-outline"></i>
          <router-link :to="{name:'channelDetail',query:{channelId:pages.channelId,counts:pages.counts,channelName:pages.channelName }}">
            显示更多
          </router-link>
         </el-col>
    </el-row>
    </div>
    <!-- 顶部分页 -->
    <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                   :page-size="size"
                   :current-page="currentPage"
                   @current-change="pageChange"
    ></el-pagination>

  </div>
</template>
<script>
  import top from "../common/Header.vue";
  import {ContentType} from "../constant/ContentType";
  import {ResultStatus} from "../constant/ResultStatus";
  import {StringUtil} from "../../utils/StringUtil";
  import PageArtical from '../common/PageCard'
  import {BasePageReq} from "../admin/req/BasePageReq";
  import {DateUtil} from "../../utils/DateUtil";
  import {Handle} from "../constant/Handle";
  import {Origin} from "../constant/Origin";
  import configs from "@/config/";
  let basePage = new BasePageReq();
  export default {
  pops:{

  },
  data() {
    return {
      size:40,//数量
      currentPage:1, //当前页数
      search:"",//返回搜索字段
      totalPage:1,
      searchInfo:{},
      dateUtil:DateUtil,
      baseURL: this.$axios.defaults.baseURL,
      baseIMG: this.$axios.defaults.baseIMG,
      rssFlag:true,
      cancelFlag:true,
      fileServer:this.$axios.defaults.fileServer,
    };
  },
  mounted(){
    this.queryPage();
  },
  methods:{


    /**
     * 获取top传来的搜索字段
     * @param data
     */
    getSearch(data){
      this.search = data;
      this.queryPage();

    },

    queryPage(){
      if(this.$route.query.page){
        this.currentPage = this.$route.query.page
      }

      basePage.size = this.size;
      basePage.page = this.currentPage;
      basePage.des = this.search;
      this.$axios
        .post('/rss/queryPage',
          basePage, //转成json
          ContentType.APPLICATION_JSON,
        )
        .then((response)=>{

          let datas = response.data;
          if(datas.code != ResultStatus.SUCCESS){
            this.$notify(StringUtil.warning(datas.msg));
            return;
          }
          let datas2 = datas.data;
          this.size =  datas2.size;

          //替换图片
          //两级list
          let channelList = datas2.list;
          for (let i = 0; i < channelList.length; i++) {

            let articalResList = channelList[i].articalResList;
            for(let j = 0; j < articalResList.length; j++) {

              let item = articalResList[j];
              if (StringUtil.checkNull(item)) {
                continue;
              }
              //替换失效的文件服务
              let descre = StringUtil.replace(item.descre, configs.invalidFileserver, configs.replateFileserver)
              let otherPre = StringUtil.replace(item.otherPre, configs.invalidFileserver, configs.replateFileserver)
              let otherResourceFile = StringUtil.replace(item.otherResourceFile, configs.invalidFileserver, configs.replateFileserver)
              item.descre = descre;
              item.otherPre = otherPre;
              item.otherResourceFile = otherResourceFile
              articalResList[j] = item;
            }
            channelList[i].articalResList = articalResList;
          }
          this.searchInfo = channelList;
          this.totalPage = datas2.totalPage
          this.currentPage = datas2.page;


        })
        .catch((error)=>{
          console.log(error);
          let datas = error.data;
          this.$notify(StringUtil.warning(datas.msg));
        })
    },
    pageChange(page){
        this.currentPage = page;
        this.$router.push(`/rss?page=${page}`)
        this.queryPage();
    },
    /**
     * 预览图
     * @param data
     * @returns {string}
     */
    getImgsURL(data,origin) {
      if (StringUtil.checkNull(data.preImg) && StringUtil.checkNull(data.otherPre)) {
        return this.baseIMG;
      }
      if(!StringUtil.checkNull(data.otherPre)){
        return data.otherPre;
      }
      return  this.fileServer + StringUtil.replace(data.preImg, '\\', '/');

    },
    detailUrl(data){
      return 'ArticalDetails?id=' + data;
    },
    /**
     * 页面跳转
     * @param data
     */
    jumpPageDetail(data) {

          this.$router.push({path: 'ArticalDetails?id=' + data})

      },
    /**
     * 取消订阅
     * @param channelId
     */
    cancel:async function (channelId,handler) {
      if (handler == Handle.DEL) {

      let flag = await this.confirmBox();
      if (!flag) {
        return;
      }
    }
      let rssReq = {handle:handler,channelId:channelId};
      this.$axios.post("/rss/save",rssReq,ContentType.APPLICATION_JSON)
        .then(response=>{

          let datas = response.data;
          if(datas.code == ResultStatus.SUCCESS){
            this.$notify(StringUtil.success(datas.msg));
          }
          else{

            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          }
          location.reload();//重新加载当前页面
        }).catch(error=>{

      })
    },
    /**
     * 确认框
     * @returns {boolean}
     */
    confirmBox: async function(){
      let flag = false;
      await  this.$confirm('此操作将取消订阅, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消订阅中。。。!'
        });
        flag = true;
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消操作'
        });
        flag = false;
      });
      return flag;
    },


  },
  components:{
    top,//置顶
    PageArtical,//分页

  }



}
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 462.953px ;
    height: 320px;

  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .card {
    transform: scale(0.8);
    width: 462.953px ;
    height: 423.375px;
  }
</style>

